<template>
  <div class="print-content">
    <div style="padding:10px 15px;width:80mm;" id="print-area">
      <div>
        <img style="display:block;margin:0 auto;" ref="barcode">
      </div>
      <table style="width: 100%;border: none;border-collapse: collapse;">
        <tr style="border: none;">
          <td style="padding: 3px 0;font-size: 13px;color: #000;text-align:center;font-weight:bold;" colspan="2">广州大学门诊部缴费单</td>
        </tr>
        <tr style="border: none;">
          <td style="padding: 3px 0;font-size: 12px;color: #000;font-weight:bold;" colspan="2">科室:{{springInfo.ks}}</td>
        </tr>
        <tr style="border: none;">
          <td style="padding: 3px 0;font-size: 12px;color: #000;font-weight:bold;" colspan="2">就诊卡号:{{springInfo.grid}}</td>
        </tr>
        <tr style="border: none;">
          <td style="padding: 3px 0;font-size: 12px;color: #000;font-weight:bold;" colspan="2">挂号流水号:{{springInfo.jsdh}}</td>
        </tr>
        <tr style="border: none;">
          <td style="padding: 3px 0;font-size: 12px;color: #000;width: 40%;font-weight:bold;">姓名:{{springInfo.name}}</td>
          <td style="padding: 3px 0;font-size: 12px;color: #000;width: 60%;">结算类型：自费医疗</td>
        </tr>
        <tr style="border: none;">
          <td style="padding: 3px 0;font-size: 12px;color: #000;width: 40%;font-weight:bold;">性别:{{springInfo.sex}}</td>
          <td style="padding: 3px 0;font-size: 12px;color: #000;width: 60%;font-weight:bold;">年龄:{{calculateAge(springInfo.csrq)}}</td>
        </tr>
      </table>
      <div style="border-bottom: 1px solid #888;"></div>
      <table style="width: 100%;border: none;border-collapse: collapse;">
        <tr style="border: none;" v-for="(item,index) in springInfo.pendingList" :key="index">
          <td style="padding: 3px 0;font-size: 12px;color: #000;width: 50%;font-weight:bold;">{{item.ksmc}}</td>
          <td style="padding: 3px 0;font-size: 12px;color: #000;width: 50%;font-weight:bold;">¥{{item.zfje}} 元</td>
        </tr>
      </table>
      <div style="border-bottom: 1px solid #888;"></div>
      <table style="width: 100%;border: none;border-collapse: collapse;">
        <tr style="border: none;">
          <td style="padding: 3px 0;font-size: 12px;color: #000;font-weight:bold;">医保支付:¥{{springInfo.ybtczf}}元</td>
        </tr>
        <tr style="border: none;">
          <td style="padding: 3px 0;font-size: 12px;color: #000;font-weight:bold;">{{toUppercase(springInfo.ybtczf)}}</td>
        </tr>
        <tr style="border: none;">
          <td style="padding: 3px 0;font-size: 12px;color: #000;font-weight:bold;">个人支付:¥{{springInfo.ybgrzf}}元</td>
        </tr>
        <tr style="border: none;">
          <td style="padding: 3px 0;font-size: 12px;color: #000;font-weight:bold;">{{toUppercase(springInfo.ybgrzf)}}</td>
        </tr>
        <tr style="border: none;">
          <td style="padding: 3px 0;font-size: 12px;color: #000;font-weight:bold;">费用合计:¥{{springInfo.total}}元</td>
        </tr>
        <tr style="border: none;">
          <td style="padding: 3px 0;font-size: 12px;color: #000;font-weight:bold;">{{toUppercase(springInfo.total)}}</td>
        </tr>
      </table>
      <div style="border-bottom: 1px solid #888;"></div>
      <table style="width: 100%;border: none;border-collapse: collapse;">
        <tr style="border: none;">
          <td style="padding: 3px 0;font-size: 12px;color: #000;font-weight:bold;">刷卡缴费</td>
        </tr>
        <tr style="border: none;">
          <td style="padding: 3px 0;font-size: 12px;color: #000;font-weight:bold;">收费日期:{{springInfo.jfsj}}</td>
        </tr>
      </table>
      <div style="border-bottom: 1px solid #888;"></div>
      <div ref="qrcode" style="margin:6px auto;width:50px;"></div>
    </div>
  </div>
</template>
  <script>
import JsBarcode from 'jsbarcode';
import QRCode from 'qrcodejs2-fix';
export default {
  props: {
    springInfo: {
      type: Object,
      default: {},
    },
  },
  name: 'Editor',
  data() {
    return {};
  },
  watch: {
    springInfo: {
      deep: true,
      handler: function (news, old) {
        if (news.name && news != old) {
          this.$refs.qrcode.innerHTML = '';
          this.generateBarcode();
        }
      },
    },
  },
  mounted() {
    if (this.springInfo && this.springInfo.name) {
      this.generateBarcode();
    }
  },
  methods: {
    generateBarcode() {
      JsBarcode(this.$refs.barcode, this.springInfo.grid, {
        width: 1,
        height: 20,
        fontSize: 13,
      });

      new QRCode(this.$refs.qrcode, {
        width: 50,
        height: 50,
        text: this.springInfo.grid,
      });
    },
    toUppercase(money) {
      if (!money) return '';
      //汉字的数字
      var cnNums = new Array(
        '零',
        '壹',
        '贰',
        '叁',
        '肆',
        '伍',
        '陆',
        '柒',
        '捌',
        '玖'
      );
      //基本单位
      var cnIntRadice = new Array('', '拾', '佰', '仟');
      //对应整数部分扩展单位
      var cnIntUnits = new Array('', '万', '亿', '兆');
      //对应小数部分单位
      var cnDecUnits = new Array('角', '分', '毫', '厘');
      //整数金额时后面跟的字符
      var cnInteger = '整';
      //整型完以后的单位
      var cnIntLast = '元';
      //最大处理的数字
      var maxNum = 999999999999999.9999;
      //金额整数部分
      var integerNum;
      //金额小数部分
      var decimalNum;
      //输出的中文金额字符串
      var chineseStr = '';
      //分离金额后用的数组，预定义
      var parts;
      if (money == '') {
        return '';
      }
      money = parseFloat(money);
      if (money >= maxNum) {
        //超出最大处理数字
        return '';
      }
      if (money == 0) {
        chineseStr = cnNums[0] + cnIntLast + cnInteger;
        return chineseStr;
      }
      //转换为字符串
      money = money.toString();
      if (money.indexOf('.') == -1) {
        integerNum = money;
        decimalNum = '';
      } else {
        parts = money.split('.');
        integerNum = parts[0];
        decimalNum = parts[1].substr(0, 4);
      }
      //获取整型部分转换
      if (parseInt(integerNum, 10) > 0) {
        var zeroCount = 0;
        var IntLen = integerNum.length;
        for (var i = 0; i < IntLen; i++) {
          var n = integerNum.substr(i, 1);
          var p = IntLen - i - 1;
          var q = p / 4;
          var m = p % 4;
          if (n == '0') {
            zeroCount++;
          } else {
            if (zeroCount > 0) {
              chineseStr += cnNums[0];
            }
            //归零
            zeroCount = 0;
            chineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
          }
          if (m == 0 && zeroCount < 4) {
            chineseStr += cnIntUnits[q];
          }
        }
        chineseStr += cnIntLast;
      }
      //小数部分
      if (decimalNum != '') {
        var decLen = decimalNum.length;
        for (var i = 0; i < decLen; i++) {
          var n = decimalNum.substr(i, 1);
          if (n != '0') {
            chineseStr += cnNums[Number(n)] + cnDecUnits[i];
          }
        }
      }
      if (chineseStr == '') {
        chineseStr += cnNums[0] + cnIntLast + cnInteger;
      } else if (decimalNum == '') {
        chineseStr += cnInteger;
      }
      return chineseStr;
    },
    calculateAge(birthday) {
      var today = new Date();
      var birthDate = new Date(birthday);
      var age = today.getFullYear() - birthDate.getFullYear();
      var monthDifference = today.getMonth() - birthDate.getMonth();
      if (
        monthDifference < 0 ||
        (monthDifference === 0 && today.getDate() < birthDate.getDate())
      ) {
        age--;
      }
      return age;
    },
  },
};
</script>
<style>
.print-content {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
  width: 100%;
  z-index: 100%;
  background: #fff;
}
</style>